<template>
	<el-main>
		<el-card shadow="never">
			<el-tabs tab-position="top">
				<el-tab-pane label="项目配置" lazy>
					<el-form :model="projectForm" :rules="projectRules" ref="projectForm" label-width="150px" label-position="right">
						<el-row>
							<el-col :span="12">
								<el-form-item label="项目名" prop="projectName">
									<el-input v-model="projectForm.projectName" placeholder="项目中文名称"></el-input>
								</el-form-item>
								<el-form-item label="版本号" prop="projectVersion" required>
									<el-input v-model="projectForm.projectVersion" placeholder="项目版本号"></el-input>
								</el-form-item>
								<el-form-item label="作者" prop="projectAuthor" required>
									<el-input v-model="projectForm.projectAuthor" placeholder="项目代码生成作者"></el-input>
								</el-form-item>
								<el-form-item label="后端代码路径" prop="projectBackendPath" required>
									<el-input v-model="projectForm.projectBackendPath" placeholder="项目代码生成后端基础路径"></el-input>
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="项目编码" prop="projectCode">
									<el-input v-model="projectForm.projectCode" placeholder="常用作代码生成后端模块前缀"></el-input>
								</el-form-item>
								<el-form-item label="包路径" prop="projectPackage" required>
									<el-input v-model="projectForm.projectPackage" placeholder="后端包基础路径，子模块追加模块路径"></el-input>
								</el-form-item>
								<el-form-item label="作者邮箱" prop="projectAuthorEmail" required>
									<el-input v-model="projectForm.projectAuthorEmail" placeholder="项目代码生成作者邮箱"></el-input>
								</el-form-item>
								<el-form-item label="前端代码路径" prop="projectFrontPath" required>
									<el-input v-model="projectForm.projectFrontPath" placeholder="项目代码生成前端基础路径"></el-input>
								</el-form-item>
							</el-col>
						</el-row>
						<el-form-item>
							<el-button v-auths="['gen:project:add','gen:project:edit']" type="primary" :loading="isProjectSaving" @click="submitProject()">保 存</el-button>
						</el-form-item>
					</el-form>
				</el-tab-pane>
				<el-tab-pane label="类型映射" lazy>
					<el-container>
						<el-header>
							<div class="left-panel">
								<el-button v-auth="'gen:columnMap:add'" type="primary" icon="el-icon-plus" @click="add">新增</el-button>
								<el-button v-auth="'gen:columnMap:remove'" type="danger" plain icon="el-icon-delete" :disabled="selection.length===0" @click="batchDel">删除</el-button>
							</div>
							<div class="right-panel">
								<div class="right-panel-search">
									<el-input v-model="search.columnType" placeholder="字段类型" clearable></el-input>
									<sc-select v-model="search.dbType" dict="db_type" placeholder="请选择数据库厂商" style="width: 100%;" clearable></sc-select>
									<el-button v-auth="'gen:columnMap:page'" type="primary" icon="el-icon-search" @click="upSearch">搜索</el-button>
									<el-button @click="resetSearch">重置</el-button>
								</div>
							</div>
						</el-header>
						<el-main class="nopadding">
							<scTable ref="table" :apiObj="dataList" size="small" row-key="id" @selection-change="selectionChange" stripe remoteSort remoteFilter>
								<el-table-column type="selection" width="50"></el-table-column>
								<el-table-column label="数据库厂商" prop="dbType" align="center" width="120"></el-table-column>
								<el-table-column label="字段类型" prop="columnType" align="center" width="140"></el-table-column>
								<el-table-column label="Java类型" prop="javaType" align="center" width="140"></el-table-column>
								<el-table-column label="Java包名" prop="javaTypePackage" align="center" width="260"></el-table-column>
								<el-table-column label="页面组件类型" prop="htmlType" align="center" width="160"></el-table-column>
								<el-table-column label="创建时间" prop="createTime" align="center" min-width="180"></el-table-column>
								<el-table-column label="操作" fixed="right" align="center" width="160">
									<template #default="scope">
										<el-button-group>
											<el-button text type="primary" size="small" @click="tableShow(scope.row, scope.$index)">查看</el-button>
											<el-button v-auth="'gen:columnMap:edit'" text type="primary" size="small" @click="tableEdit(scope.row, scope.$index)">编辑
											</el-button>
											<el-popconfirm title="确定删除吗？" @confirm="tableDel(scope.row, scope.$index)">
												<template #reference>
													<el-button v-auth="'gen:columnMap:remove'" text type="primary" size="small">删除</el-button>
												</template>
											</el-popconfirm>
										</el-button-group>
									</template>
								</el-table-column>

							</scTable>
						</el-main>
					</el-container>

					<save-dialog v-if="dialog.save" ref="saveDialog" @success="refreshTable" @closed="dialog.save=false"></save-dialog>

				</el-tab-pane>
			</el-tabs>
		</el-card>
	</el-main>
</template>

<script>
import saveDialog from './save.vue'

export default {
	name: 'genConfig',
	components: {
		saveDialog
	},
	data() {
		return {
			isProjectSaving: false,
			dialog: {
				save: false
			},
			// 表单数据
			projectForm: {
				id: null,
				projectName: null,
				projectCode: null,
				projectVersion: null,
				projectAuthor: null,
				projectAuthorEmail: null,
				projectPackage: null,
				projectBackendPath: null,
				projectFrontPath: null
			},
			// 表单验证规则
			projectRules: {
				projectName: [
					{required: true, message: '请输入项目名', trigger: "blur"}
				],
				projectCode: [
					{required: true, message: '请输入项目编码', trigger: "blur"}
				],
				projectVersion: [
					{required: true, message: '请输入项目版本号', trigger: 'blur'}
				],
				projectAuthor: [
					{required: true, message: '请输入作者', trigger: 'blur'}
				],
				projectAuthorEmail: [
					{required: true, message: '请输入作者邮箱', trigger: 'blur'}
				],
				projectPackage: [
					{required: true, message: '请输入包路径', trigger: 'blur'}
				],
				projectBackendPath: [
					{required: true, message: '请输入后端代码路径', trigger: 'blur'}
				],
				projectFrontPath: [
					{required: true, message: '请输入前端代码路径', trigger: 'blur'}
				]
			},
			selection: [],
			search: {
				columnType: null,
				dbType: null,
			},
			dataList: this.$API.gen.columnMap.page
		}
	},
	mounted() {
		this.setProjectData();
	},
	methods: {
		// 表单注入数据
		async setProjectData() {
			const data = await this.$API.gen.project.get.get();
			if (data) {
				this.projectForm.id = data.id;
				this.projectForm.projectName = data.projectName;
				this.projectForm.projectCode = data.projectCode;
				this.projectForm.projectVersion = data.projectVersion;
				this.projectForm.projectAuthor = data.projectAuthor;
				this.projectForm.projectAuthorEmail = data.projectAuthorEmail;
				this.projectForm.projectPackage = data.projectPackage;
				this.projectForm.projectBackendPath = data.projectBackendPath;
				this.projectForm.projectFrontPath = data.projectFrontPath;
			}
		},
		// 表单提交
		submitProject() {
			this.$refs.projectForm.validate((valid) => {
				if (valid) {
					this.isProjectSaving = true;
					if (this.projectForm.id) {
						this.$API.gen.project.edit.put(this.projectForm).then(() => {
							this.$message.success("保存成功");
						})
					} else {
						this.$API.gen.project.add.post(this.projectForm).then(() => {
							this.$message.success("保存成功");
						})
					}
					this.isProjectSaving = false;
				}
			})
		},
		// 添加
		add() {
			this.dialog.save = true;
			this.$nextTick(() => {
				this.$refs.saveDialog.open();
			})
		},
		// 批量删除
		batchDel() {
			this.$confirm(`确定删除选中的 ${this.selection.length} 项数据吗？`, '提示', {
				type: 'warning'
			}).then(() => {
				const loading = this.$loading();
				const idList = [];
				this.selection.forEach(e => idList.push(e.id));
				const reqData = {idList: idList};
				this.$API.gen.columnMap.remove.delete(reqData).then(() => {
					this.$refs.table.refresh();
					this.$message.success("删除成功");
				})
				loading.close();
			})
		},
		// 查看
		tableShow(row) {
			this.dialog.save = true;
			this.$nextTick(() => {
				this.$refs.saveDialog.open('show').setData(row);
			})
		},
		// 编辑
		tableEdit(row) {
			this.dialog.save = true;
			this.$nextTick(() => {
				this.$refs.saveDialog.open('edit').setData(row);
			})
		},
		// 删除
		tableDel(row) {
			const reqData = {idList: [row.id]};
			this.$API.gen.columnMap.remove.delete(reqData).then(() => {
				this.$refs.table.refresh();
				this.$message.success("删除成功");
			})
		},
		// 搜索
		upSearch() {
			this.$refs.table.upData(this.search);
		},
		// 重置
		resetSearch() {
			this.search.columnType = null;
			this.search.dbType = null;
			this.$refs.table.upData(this.search);
		},
		// 表格选择后回调事件
		selectionChange(selection) {
			this.selection = selection;
		},
		// 表格刷新
		refreshTable() {
			this.$refs.table.refresh();
		}
	}
}
</script>

<style>
</style>
